<template>
  <!-- 详情弹窗 -->
  <a-modal
    centered
    title="用户详情"
    width="416px"
    :body-style="{ 'padding-top': '8px' }"
    :open="visibleModal"
    :footer="false"
    :mask-closable="false"
    @cancel="emits('update:visibleModal', false)"
  >
    <div v-if="viewItem" class="view-info">
      <div class="info-item">
        <span>用户名称</span>
        <span>{{ viewItem.username }}</span>
      </div>
      <div class="info-item">
        <span>手机号</span>
        <span>{{ viewItem.tel }}</span>
      </div>
      <div class="info-item">
        <span>邮箱</span>
        <span>{{ viewItem.email }}</span>
      </div>
      <a-divider />
      <div v-if="isAdmin" class="info-item">
        <span>角色</span>
        <span>{{ viewItem.roleNames }}</span>
      </div>
      <div class="info-item word-break-all" style="align-items: flex-start">
        <span>描述</span>
        <span>{{ viewItem.description || '/' }}</span>
      </div>
      <div class="info-item">
        <span>状态</span>
        <span>{{ viewItem.status }}</span>
      </div>
      <div class="info-item">
        <span>创建时间</span>
        <span>{{ viewItem.createTime }}</span>
      </div>
      <div class="info-item">
        <span>更新时间</span>
        <span>{{ viewItem.updateTime }}</span>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { IUser } from '../types'
  export interface Props {
    visibleModal: boolean
    viewItem: IUser | null
    isAdmin?: boolean
  }

  withDefaults(defineProps<Props>(), {
    isAdmin: false
  })

  const emits = defineEmits<{
    (e: 'update:visibleModal', params: boolean): void
  }>()
</script>

<style lang="less" scoped>
  .view-info {
    padding-top: 16px;

    .info-item {
      display: flex;
      justify-content: space-between;
      align-items: center;

      span:nth-of-type(1) {
        margin-right: 16px;
        .font14b();

        white-space: nowrap;
      }

      span:nth-of-type(2) {
        .font14();

        max-width: 258px;
      }
    }

    .word-break-all {
      word-break: break-all;
    }

    & > * + * {
      margin-top: 16px;
    }
  }
</style>
